<template>
    <div id="app">
        <video muted="muted" src="../../assets/video/8~1.mp4" loop="loop" autoplay="autoplay"></video>
        <div id="box">
            <h1>{{ pageInfo.title }}</h1>
            <commonLogin v-if="flag" />
            <smsLogin v-else></smsLogin>
            <p @click="cutHandle">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="flag?'#icon-iphone':'#icon-shouye'"></use>
                </svg>
                <b>{{ pageInfo.toggleDes }}</b>
            </p>
        </div>
    </div>
</template>
    
<script setup>
// 抽离 结构 重新引入 正常登录
import commonLogin from '../../components/login/commonLogin.vue';

// 手机验证码登录
import smsLogin from "../../components/login/smsLogin.vue"

import { ref, watchEffect } from "vue"

// markRow可以将响应式的ref变成常规对象

// 用于标记是否登入
let flag = ref(true)

// 点击切换登入状态
let cutHandle = () => {
    flag.value = !flag.value
}

// 声明一个数据对象 用于切换页面显示
let pageInfo = ref({
    title: "千峰管理系统",    //标题
    loginType: "common", //登入类型 commonLogin/smsLogin
    toggleDes: "点击切换手机登入",   // 切换的描述信息
    Comment: commonLogin       //对应的组件
})

// 通过结合计算属性和vue3的动态组件来实现组件的切换
watchEffect(() => {
    // 常规登入
    if (flag.value) {
        pageInfo.value = {
            title: "千峰管理系统",    //标题
            loginType: "common", //登入类型 commonLogin/smsLogin
            toggleDes: "点击切换手机登入",   // 切换的描述信息
            Comment: commonLogin       //对应的组件
        }

    } else {
        // 短信登入
        pageInfo.value = {
            title: "短信登录",    //标题
            loginType: "sms", //登入类型 commonLogin/smsLogin
            toggleDes: "点击切换用户名登录",   // 切换的描述信息
            Comment: smsLogin       //对应的组件
        }
    }
})


</script>
    
<style lang="less" scoped>
#box {
    .el-input__wrapper {
        width: 250px !important;
    }
}


.icon{
    vertical-align:baseline
}


#box {
    width: 400px;
    height: 580px;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    position: fixed !important;
    right: 100px;
    bottom: 50px;
}

#box {
    :deep .el-form-item__label {
        color: aliceblue !important;
    }
}

.el-form-item__label {
    width: 76px;
}

.submit-style {
    width: 250px;
}

h1 {
    position: relative;
    bottom: 60px;
}

p {
    cursor: pointer;
}

b {
    text-decoration: underline
}

.icon {
    width: 2em;
    height: 2em;
    position: relative;
    top: 10px;
    right: 10px;
}






video {
    position: fixed;
    left: -328px;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    // z-index: -1;
}
</style>